<template>
  <div class="dialogitem">
    <!--显示新聊天人列表-->
    <div class="dialogListItems" v-for="addinfo in newArray">
      <div class="item-wraps" @click='goDialog(addinfo.id)'>
        <div class="left">
          <div class="tx">
            <img :src="addinfo.imgurl" alt="" width="30" height="30">
          </div>
        </div>
        <div class="content">
          <div class="rebotname">{{addinfo.dissname}}</div>
          <div class="firstDialog">{{addinfo.contentList[addinfo.contentList.length-1].msg}}</div>
        </div>
        <div class="right">
          <div class="time">{{addinfo.contentList[addinfo.contentList.length-1].time}}</div>
          <mt-badge type="primary">{{addinfo.contentList.length}}</mt-badge>
        </div>
      </div>
    </div>
    <!--默认的聊天记录列表人员-->
    <!--循环data里的数据-->
    <!-- <div class="dialogListItem" v-for="item in chatList">
       <div class="item-wrap" @click='goDialog(item.id)'>
         <div class="left">
           <div class="tx">
             <img :src='item.tx' alt="" width="30" height="30">
           </div>
         </div>
         <div class="content">
           <div class="rebotname">{{item.name}}</div>
           <div class="firstDialogs">{{item.contentList[item.contentList.length-1].msg}}</div>
         </div>
         <div class="right">
           <div class="time">{{item.contentList[item.contentList.length-1].time}}</div>

           <mt-badge type="primary">{{item.contentList.length}}</mt-badge>
         </div>
       </div>
     </div>-->
    <!--循环api的数据的前3条-->
    <div class="dialogListItem" v-for="(item,index) in dialogueData" v-if="index<3">
      <div class="item-wrap" @click='goDialog(item.id)'>
        <div class="left">
          <div class="tx">
            <img :src='item.tx' alt="" width="30" height="30">
          </div>
        </div>
        <div class="content">
          <div class="rebotname">{{item.name}}</div>
          <div class="firstDialogs">{{item.contentList[item.contentList.length-1].msg}}</div>
        </div>
        <div class="right">
          <div class="time">{{item.contentList[item.contentList.length-1].time}}</div>
          <mt-badge type="primary">{{item.contentList.length}}</mt-badge>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {getDialog} from '../../api/api';
  import {mapMutations, mapGetters} from 'vuex'

  export default {
    name: 'dialoglistItem',
    data() {
      return {
        chatList: [
          {
            id: 1,
            tx: "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2980592991,2084522472&fm=58&bpow=416&bpoh=416",
            name: "邓伦",
            contentList: [{"msg": "你好！我是邓伦", "time": "13:00", "role": "1"}],
            time: "19:42"
          },
          {
            id: 2,
            tx: "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2855044802,2008171980&fm=58&bpow=1200&bpoh=1714",
            name: "蔡徐坤",
            contentList: [{"msg": "你好！我是蔡徐坤，坤坤", "time": "11:00", "role": "1"}],
            time: "19:42"
          },
          {
            id: 3,
            tx: "https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=ab9143bada43ad4bb2234e92e36b31ca/f703738da9773912c1b93b7ef3198618367ae216.jpg",
            name: "王一博",
            contentList: [{"msg": "你好！我是王一博", "time": "10:20", "role": "1"}],
            time: "19:42"
          }
        ],
        moreList: [],
        newArray: [] // 存放数组去重后的addList数据
      }
    },
    created() {
      // 数组去重
      var array = this.addList
      var tmpObj = {};
      var result = [];
      array.forEach(function (a) {
        var key = (typeof a) + a;
        if (!tmpObj[key]) {
          tmpObj[key] = true;
          result.push(a);
        }
      });
        this.newArray = result
      // console.log( this.newArray);
    },
    computed: {
      ...mapGetters([ // 拿到info的状态
        'info',
        'addList'
      ]),
      dialogueData() {
        return this.$store.state.dialogue;
      },

    },
    methods: {
      goDialog(id) {
        this.$router.push('/dialog/' + id)
        // this.$router.push({name:'dialog', params: { id:id }});
        //修改topBar状态
        this.$store.commit('setNavbar');
      },
      ...mapMutations({
        setAddress: 'SET_INFO'
      })
    }
  }
</script>
<style>
  .dialogitem {
    width: 100%;
    padding: 0 8px;
  }

  .dialogListItems {
    position: relative;
    padding: 6px;
  }

  .item-wraps {
    overflow: hidden;
    height: 50px
  }

  .dialogListItems .left {
    position: absolute;
    left: 0;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    top: 10px;
  }

  .dialogListItems .content {
    position: absolute;
    margin-left: 45px
  }

  .dialogListItems .right {
    position: absolute;
    right: 0;
    margin-right: 13px;
  }

  .firstDialogs {
    color: #918d8d;
    width: 161px;
    overflow: hidden;
    height: 22px;
  }

  .dialogListItems .time {
    color: #918d8d
  }

  .mint-badge.is-size-normal {
    font-size: 9px;
    margin-left: 9px
  }

  .dialogListItem {
    position: relative;
    padding: 6px;
  }

  .item-wrap {
    overflow: hidden;
    height: 50px
  }

  .dialogListItem .left {
    position: absolute;
    left: 0;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    top: 10px;
  }

  .dialogListItem .content {
    position: absolute;
    margin-left: 45px
  }

  .dialogListItem .right {
    position: absolute;
    right: 0;
    margin-right: 13px;
  }

  .firstDialog {
    color: #918d8d;
    width: 161px;
    overflow: hidden;
    height: 22px;
  }

  .dialogListItem .time {
    color: #918d8d
  }

  .mint-badge.is-size-normal {
    font-size: 9px;
    margin-left: 9px
  }

</style>
